
<template>
  <div>
    <el-container>
      <el-header>
        <img class="logo" src="@/assets/logo.png">
        <el-menu
            :default-active="def_url"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color=rgb(53,61,64)
            text-color=rgb(233,238,243)
            active-text-color="#ffd04b">
          <el-menu-item index="1" @click="toHomePage" >首页</el-menu-item>
          <el-menu-item index="2" @click="toAllBooks" >全部书籍</el-menu-item>
          <el-menu-item index="3" @click="toHotSales">热销</el-menu-item>
          <el-menu-item index="4" @click="toNewProduct">新品</el-menu-item>
          <el-menu-item index="5" @click="toRegist">注册</el-menu-item>
          <el-menu-item index="6" @click="toLogin">登录</el-menu-item>
        </el-menu>
        <el-row :gutter="20">
          <el-col :span="14" >
            <el-input @keyup.enter.native="search" placeholder="请输入搜索信息">
              <i class="el-icon-search" slot="suffix" @click="search" style="line-height: 40px"></i>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button :plain="true" @click="toCart1" icon="el-icon-shopping-cart-2" circle></el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>

</template>

<script>
export default {
  data() {
    return {
      def_url:'1'
    }
  },
  watch: {
    $route(to) {
      this.updateDefUrl(to.path);
    }
  },
  created() {
    this.updateDefUrl(this.$route.path);
  },
  methods: {
    search() {
    },
    toCart1() {
      this.$message({
        message: '你还未登录，请先登录',
        type: 'warning'
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    toHomePage() {
      if (this.$route.path !== '/home/homepage') {
        this.$router.push('/home/homepage');
      }
    },
    toAllBooks(){
      if (this.$route.path !== '/home/allbooks') {
        this.$router.push('/home/allbooks')
      }
    },
    toHotSales() {
      if (this.$route.path !== '/home/hotsales') {
        this.$router.push('/home/hotsales');
      }
    },
    toNewProduct() {
      if (this.$route.path !== '/home/newproducts') {
        this.$router.push('/home/newproducts');
      }
    },
    toRegist() {
      if (this.$route.path !== '/home/regist') {
        this.$router.push('/home/regist')
      }
    },
    toLogin() {
      if (this.$route.path !== '/home/login') {
        this.$router.push('/home/login')
      }
    },
    updateDefUrl(path) {
      switch (path) {
        case '/home/homepage':
          this.def_url = '1';
          break;
        case '/home/allbooks':
          this.def_url = '2';
          break;
        case '/home/hotsales':
          this.def_url = '3';
          break;
        case '/home/newproducts':
          this.def_url = '4';
          break;
        case '/home/regist':
          this.def_url = '5';
          break;
        case '/home/login':
          this.def_url = '6';
          break;
        default:
          this.def_url = '1'; // 默认首页
      }
    }
  }

}
</script>

<style>
.logo{
  width: 200px;
  height: 60px;
  vertical-align: middle;
}
.el-container {
  height: 100vh;
  width: 100vw;
}

.el-header {
  display: flex;
  justify-content: space-between;
  background-color: rgb(53,61,64);
  color: white;
  text-align: center;
  line-height: 60px;
}

.el-footer {
  background-color: rgb(53,61,64);
  color: white;
  text-align: center;
  line-height: 60px;
}

.button-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  margin-left: 0;
  margin-top: 0;}
</style>
